import styles from './index.less';
import {
    motion, useInView, useAnimate,
} from 'motion/react';
import { useEffect } from 'react';

export default () => {

    const [scope, animate] = useAnimate();
    const isInView = useInView(scope);

    useEffect(() => {
        if (isInView) {
            animate(scope.current, {
                backgroundColor: 'rgb(255, 185, 9)',
                scale: 1,
            }, { duration: 2 });
        } else {
            animate(scope.current, {
                backgroundColor: 'rgb(35, 35, 35)',
                scale: 0.85,
            }, { duration: 2 });
        }
    }, [isInView]);

    return (
        <div className={styles.container}>
            <div className={styles.firstView}>View 1</div>
            <motion.div
                className={styles.secondView}
                initial={{ opacity: 0, scale: 0.85 }}
                whileInView={{
                    opacity: 2,
                    scale: 1,
                    backgroundColor: 'rgb(255, 108, 164)'
                }}
                transition={{ duration: 2 }}
            >
                View 2
            </motion.div>
            <div ref={scope} className={styles.thirdView}>
                View 3
            </div>
        </div>
    );
}